<template>
	<view class="shopro-tabbar-wrap" v-if="tabbarList && tabbarList.length && showTabbar">
		<view class="tabbar-box" :style="{ background: tabbarData.bgcolor || '#fff' }">
			<view class="tabbar-item" v-for="(tab, index) in tabbarList" :key="tab.name" @tap="switchTabbar(tab, index)"
				v-if="index<=1">
				<view class="img-box">
					<image class="tabbar-icon" v-if="tabbarData.style == 1 || tabbarData.style == 2"
						:src="currentPath == tab.path ? tab.activeImage : tab.image" mode="aspectFill"></image>
					<!-- 购物车角标 -->
					<view v-if="tab.path == '/pages/index/cart' && cartNum" class="badge">{{ cartNum }}</view>
				</view>

				<view class="tabbar-text" v-if="tabbarData.style == 1 || tabbarData.style == 3"
					:style="{ color: currentPath == tab.path ? tabbarData.activeColor : tabbarData.color }">
					{{ tab.name }}
				</view>
			</view>
			<!-- 中间突出tabbar -->
			<view class="logo-item" @click="navigatorApp">
				<image class="logo-box" src="@/static/images/logo.png" mode="aspectFill"></image>
				<view class="tabbar-text">云仓</view>
			</view>
			<view class="tabbar-item" v-for="(tab, index) in tabbarList" :key="tab.name" @tap="switchTabbar(tab, index)"
				v-if="index>1">
				<view class="img-box">
					<image class="tabbar-icon" v-if="tabbarData.style == 1 || tabbarData.style == 2"
						:src="currentPath == tab.path ? tab.activeImage : tab.image" mode="aspectFill"></image>
					<!-- 购物车角标 -->
					<view v-if="tab.path == '/pages/index/cart' && cartNum" class="badge">{{ cartNum }}</view>
				</view>

				<view class="tabbar-text" v-if="tabbarData.style == 1 || tabbarData.style == 3"
					:style="{ color: currentPath == tab.path ? tabbarData.activeColor : tabbarData.color }">
					{{ tab.name }}
				</view>
			</view>
		</view>
		<u-popup v-model="showFloatBtn" mode="center" border-radius="32">
			<view class="warp">
				<view class="rect" @tap.stop>
					<view class="title">长按识别小程序</view>
					<view class="erweima">
						<image :src="navigatorImg" :show-menu-by-longpress="true" mode="widthFix"></image>
					</view>
					<view class="lianxi" @click="showFloatBtn=false">我知道了</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	/**
	 * 自定义底部导航
	 * @property {Array} tabbarList - vuex初始化的底部导航数据
	 * @property {String} currentPath -computed解析当前页面路径。
	 */
	import {
		mapMutations,
		mapActions,
		mapState,
		mapGetters
	} from 'vuex';
	import {
		router
	} from '@/shopro/router';
	export default {
		name: 'shoproTabbar',
		components: {},
		props: {
			showNavigation: {
				type: Boolean,
				default: false,
			},
			navigatorImg: {
				type: String,
				default: '',
			}
		},
		data() {
			return {
				currentPath: '', //当前页面路径
				showFloatBtn: false
			};
		},
		mounted() {
			this.currentPath = this.$Route.path === '/pages/index/index' ? this.$Route.path : this.$Route.fullPath;
		},
		computed: {
			...mapGetters(['cartNum', 'tabbarData']),
			// 底部导航栏列表
			tabbarList() {
				if (this.tabbarData) {
					return this.tabbarData.list;
				}
			},
			// 后台tabbarList数据中必需含有'/pages/index/index',不然逻辑混乱
			showTabbar() {
				if (this.tabbarData && this.tabbarData.list) {
					let arr = ['/pages/index/index'];
					let path = '';
					for (let item of this.tabbarData.list) {
						arr.push(item.path);
					}
					return arr.includes(this.currentPath);
				}
			}
		},
		methods: {
			// 跳转其他小程序
			navigatorApp() {
				if (this.showNavigation && this.navigatorImg) {
					this.showFloatBtn = true
				}
				if (this.showNavigation && !this.navigatorImg) {
					uni.navigateToMiniProgram({
						appId: 'wxb831b7f7207347f8',
					})
				}
			},
			// 切换tabbar
			switchTabbar(tab, index) {
				this.$tools.routerTo(tab.path, true);
			}
		}
	};
</script>

<style lang="scss">
	.warp {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;

		.rect {
			width: 295px;
			height: 400px;
			background: #FEE1D9;
			border-radius: 16px;
			text-align: center;
			position: relative;

			.title {
				font-weight: 600;
				font-size: 22px;
				color: #011651;
				line-height: 30px;
				padding-top: 32px;
			}

			.erweima {
				width: 215px;
				height: 215px;
				background: linear-gradient(180deg, #FDFCFC 0%, #FAF8F7 100%);
				box-shadow: 0px 5px 23px 0px #FF795F;
				border-radius: 15px;
				margin: 20px auto;

				image {
					width: 181px;
					height: 181px;
					margin-top: 15px;
				}
			}

			.lianxi {
				width: 261px;
				height: 50px;
				background-color: #FF4F59;
				line-height: 50px;
				text-align: center;
				color: #FFFFFF;
				font-weight: 600;
				font-size: 15px;
				margin: 0 auto;
				border-radius: 50px;
			}
		}
	}


	.shopro-tabbar-wrap {
		height: calc(100rpx + env(safe-area-inset-bottom) / 2);
		padding-bottom: calc(env(safe-area-inset-bottom) / 2);
		position: relative;
		width: 100%;
		z-index: 999;

		.tabbar-box {
			position: fixed;
			display: flex;
			align-items: center;
			width: 100%;
			height: calc(100rpx + env(safe-area-inset-bottom) / 2);
			border-top: 1rpx solid #eeeeee;
			background-color: #fff;
			z-index: 998;
			bottom: 0;
			padding-bottom: calc(env(safe-area-inset-bottom) / 2);

			.logo-item {
				position: relative;
				z-index: 10;
				top: -49rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;

				.logo-box {
					width: 142rpx;
					height: 144rpx;
					border-radius: 50%;
				}

				.tabbar-text {
					font-size: 20rpx;
					margin-top: 4rpx;
					text-align: center;
				}
			}

			.tabbar-item {
				height: 100%;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				flex: 1;


				.img-box {
					position: relative;

					.badge {
						position: absolute;
						/* #ifndef APP-NVUE */
						display: inline-flex;
						/* #endif */
						justify-content: center;
						align-items: center;
						line-height: 24rpx;
						padding: 4rpx 10rpx;
						border-radius: 100rpx;
						color: #fff;
						font-size: 24rpx;
						z-index: 9;
						background-color: $u-type-error;
						transform: scale(0.8);
						transform-origin: center center;
						top: 0;
						left: 46rpx;
						white-space: nowrap;
					}
				}

				.tabbar-icon {
					width: 50rpx;
					height: 50rpx;
					display: block;
				}

				.tabbar-text {
					font-size: 20rpx;
					margin-top: 4rpx;
				}
			}
		}
	}
</style>